<template>
    <div class="map-controls">
        <button @click="zoomIn" title="放大" class="icon-button">➕</button>
        <button @click="zoomOut" title="缩小" class="icon-button">➖</button>
        <button @click="zoomToFullExtent" title="缩放到全图" class="icon-button">🌐</button>
        <button @click="resetView" title="重置视图" class="icon-button">🔄</button>
    </div>
</template>

<script>
import { getCenter } from 'ol/extent';
import * as easing from 'ol/easing';
export default {
    name: 'BaseMapControls',
    props: {
        map: {
            type: Object,
            required: true
        },
        fullExtent: {
            type: Array,
            default: () => [13291547.200716866, 3730538.7944126646, 13391734.742430812, 3809341.761436934]
        },
        zoomStep: {
            type: Number,
            default: 1
        }
    },
    methods: {
        zoomIn() {
            const view = this.map.getView();
            const zoom = view.getZoom();
            if (zoom !== undefined) {
                view.animate({ zoom: zoom + this.zoomStep });
            }
        },
        zoomOut() {
            const view = this.map.getView();
            const zoom = view.getZoom();
            if (zoom !== undefined) {
                view.animate({ zoom: zoom - this.zoomStep });
            }
        },
        zoomToFullExtent() {
            const view = this.map.getView();
            const extentCenter = getCenter(this.fullExtent);
            const extentResolution = view.getResolutionForExtent(this.fullExtent);

            // 平滑移动到中心点并缩放
            view.animate({
                center: extentCenter,
                duration: 1800,
                easing: easing.easeOut
            });

            view.animate({
                resolution: extentResolution * 0.9,
                duration: 1200,
                easing: easing.easeOut
            });
        },
        resetView() {
            const initialCenter = [13418523.680187497, 3673600.980457229];
            const initialZoom = 15;
            const view = this.map.getView();
            view.animate({
                center: initialCenter,
                zoom: initialZoom,
                duration: 1500
            });
        }
    }
};
</script>

<style scoped>
.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-controls button {
    width: 40px;
    height: 40px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease;

    /* 使用 flex 布局让图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 移除可能导致偏移的属性 */
    background-image: none;
    /* 如果你不需要背景图的话 */
    background-position: center;
    /* 可选 */
    text-align: center;
    /* 可选 */
}

.map-controls button:hover {
    background-color: #f0f0f0;
}
</style>